<script setup>
import FolderCard from '@/components/FolderCard.vue'
import VideoCard from '@/components/VideoCard.vue'
import { inject, ref, onMounted, onUnmounted, watch } from 'vue'
import { useRoute } from 'vue-router';
import axios from 'axios';

// 注入深色模式状态
const { isDarkMode } = inject('darkMode', { isDarkMode: ref(false) });

// 粒子连线动画相关变量
const canvasRef = ref(null);
let canvas, ctx, width, height, particles, animationFrame, mousePosition;

// 初始化粒子连线动画
const initParticleCanvas = () => {
  // 创建canvas元素
  canvas = canvasRef.value;
  ctx = canvas.getContext('2d');
  
  // 设置canvas尺寸
  width = window.innerWidth;
  height = window.innerHeight;
  canvas.width = width;
  canvas.height = height;
  
  // 粒子配置
  const config = {
    zIndex: -1,
    opacity: 0.5,
    color: isDarkMode.value ? '255,255,255' : '0,0,0',
    count: 99
  };
  
  // 鼠标位置对象
  mousePosition = { x: null, y: null, max: 20000 };
  
  // 创建粒子
  particles = [];
  for (let i = 0; i < config.count; i++) {
    const x = Math.random() * width;
    const y = Math.random() * height;
    const xa = 2 * Math.random() - 1;
    const ya = 2 * Math.random() - 1;
    particles.push({ x, y, xa, ya, max: 6000 });
  }
  
  // 将鼠标位置对象添加到粒子数组中
  particles.push(mousePosition);
  
  // 添加鼠标事件监听
  window.addEventListener('mousemove', onMouseMove);
  window.addEventListener('mouseout', onMouseOut);
  window.addEventListener('resize', onResize);
  
  // 开始动画
  animate();
};

// 动画函数
const animate = () => {
  ctx.clearRect(0, 0, width, height);
  
  // 更新和绘制每个粒子
  particles.forEach((particle, i) => {
    if (particle === mousePosition) return;
    
    // 更新粒子位置
    particle.x += particle.xa;
    particle.y += particle.ya;
    
    // 碰到边界反弹
    particle.xa *= (particle.x > width || particle.x < 0) ? -1 : 1;
    particle.ya *= (particle.y > height || particle.y < 0) ? -1 : 1;
    
    // 绘制粒子
    ctx.fillStyle = isDarkMode.value ? 'rgba(255,255,255,0.8)' : 'rgba(0,0,0,0.8)';
    ctx.fillRect(particle.x - 0.5, particle.y - 0.5, 1, 1);
    
    // 连接粒子
    for (let j = i + 1; j < particles.length; j++) {
      const p2 = particles[j];
      if (p2.x === null || p2.y === null) continue;
      
      const dx = particle.x - p2.x;
      const dy = particle.y - p2.y;
      const dist = dx * dx + dy * dy;
      
      if (dist < p2.max) {
        // 如果是鼠标，且距离小于最大距离的一半，则产生排斥力
        if (p2 === mousePosition && dist >= p2.max / 2) {
          particle.x -= 0.03 * dx;
          particle.y -= 0.03 * dy;
        }
        
        // 绘制连线
        const opacity = (p2.max - dist) / p2.max;
        ctx.beginPath();
        ctx.lineWidth = opacity / 2;
        ctx.strokeStyle = isDarkMode.value 
          ? `rgba(255,255,255,${opacity + 0.2})` 
          : `rgba(0,0,0,${opacity + 0.2})`;
        ctx.moveTo(particle.x, particle.y);
        ctx.lineTo(p2.x, p2.y);
        ctx.stroke();
      }
    }
  });
  
  animationFrame = requestAnimationFrame(animate);
};

// 事件处理函数
const onMouseMove = (e) => {
  mousePosition.x = e.clientX;
  mousePosition.y = e.clientY;
};

const onMouseOut = () => {
  mousePosition.x = null;
  mousePosition.y = null;
};

const onResize = () => {
  width = window.innerWidth;
  height = window.innerHeight;
  canvas.width = width;
  canvas.height = height;
};

// 监听深色模式变化，更新粒子颜色
watch(isDarkMode, (newValue) => {
  // 如果粒子动画已经初始化，则更新粒子和连线的颜色
  if (ctx) {
    // 重新绘制动画帧以应用新的颜色
    animate();
  }
});

// 组件挂载时初始化
onMounted(() => {
  initParticleCanvas();
});

// 组件卸载时清理
onUnmounted(() => {
  if (animationFrame) {
    cancelAnimationFrame(animationFrame);
  }
  window.removeEventListener('mousemove', onMouseMove);
  window.removeEventListener('mouseout', onMouseOut);
  window.removeEventListener('resize', onResize);
});
</script>

<template>
  <div class="home-container">
    <canvas ref="canvasRef" class="particle-canvas"></canvas>
    <main class="main-content">
      这里空空的
      <br>
      <br>
      就像你和ta的聊天框一样
    </main>
  </div>
</template>

<style scoped>
.home-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.main-content {
  position: relative;
  z-index: 1;
  padding: 0 2rem;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 80px; /* 为固定导航栏留出空间 */
  width: 100%;
}
</style>